<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ msg }}, {{ obj.name }}, {{ obj.age }}
      <br />
      {{ arr }}

      <div v-for="v in arr1" :key="v.id">{{ v.id }}, {{ v.age }}, {{ v.name }}</div>
    </div>

    <script src="../vue.js"></script>

    <script>
      (() => {
        // Vue在创建实例时，会给已存在的数据做监听动作，创建时没有的属性不会监听，之后动态添加的新属性不会监听，除非使用(vm.$set或Vue.set)
        window.vm = new Vue({
          el: '#app',
          data: {
            msg: 'hehe',
            obj: {
              name: 'zs',
              // age: 18,
            },
            arr: [1, 2, 3],
            arr1: [],
          },
        });

        vm.obj.age = 19; // 不会驱动视图，替代方案：vm.$set(vm.obj, 'age', 19);

        vm.arr[0] = 11; // 不会驱动视图，替代方案：vm.$set(vm.arr, 1, 11);

        var tmpArr = [
          { id: 1, age: 2 },
          { id: 2, age: 3 },
          { id: 3, age: 4 },
        ];

        // 在赋值时，Vue也会做监听动作，如果赋值时不存在的属性，后续是不只是响应式监听驱动视图的
        vm.arr1 = tmpArr;

        tmpArr[0].name = 'zs';

        tmpArr[0].name = 'ls'; // 不会驱动视图，因为在赋值时，不存在name属性，所以Vue没有监听该name属性的变化
      })();
    </script>
  </body>
</html>
